<template>
    <el-container class="home layout-container-demo">
        <el-header style="text-align: right; font-size: 12px">
            <HeaderView></HeaderView>
        </el-header>
        <el-container>
            <AsideView></AsideView>
            <el-main>
                <!-- 二级视图 , 在一级视图 / 路由之前 -->          
                <el-scrollbar>
                    <router-view></router-view>
                </el-scrollbar>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import {  mapGetters, mapMutations, mapActions } from "vuex";

import HeaderView from './Layout/HeaderView.vue';
import AsideView from './Layout/AsideView.vue'


export default {
    name: "HomeView",
    computed: {
        ...mapGetters(["isLogin"])
    },
    methods: {
        ...mapMutations(["getAuthorityFromLocal"]),
        ...mapActions(["exitAndUpdateAuthority"]),
    },
    created() {
        // 此写法=> 必须要进入到主页面才可以,所在在router路由守卫中还未进行数据持久化, 无法使用vuex中的数据 
        // this.getAuthorityFromLocal();  // 数据持久化 => 将本地数据同步vuex
    },
    mounted() {
        // console.log("主页挂载完毕", this.isLogin);
        // if (!this.isLogin) {
        //     this.$router.push({ path: "/login" })
        // }
    },
    components:{
        HeaderView,
        AsideView
    }
}
</script>

<style lang="scss" scoped>
.home {
    width: 100%;
    height: 100%;
}

.layout-container-demo .el-header {
    position: relative;
    background-color: var(--el-color-primary-light-7);
    color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
    color: var(--el-text-color-primary);
    background: var(--el-color-primary-light-8);
}

.layout-container-demo .el-menu {
    border-right: none;
}

.layout-container-demo .el-main {
    padding: 0;
}

.layout-container-demo .toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 20px;
}
</style>